<template>
  <Form :model="formItem"
        :rules="ruleInline"
        :label-width="80"
        ref="resource_form">

    <Alert show-icon>
      权限基本信息
      <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
    </Alert>

    <FormItem label="权限名称" prop="source_name" style="margin-top: 20px;">
      <Input v-model="formItem.source_name" placeholder="请输入权限名称..."></Input>
    </FormItem>

    <FormItem label="权限编号" prop="source_url">
      <Input v-model="formItem.source_url" placeholder="请输入权限编号..."></Input>
    </FormItem>

    <FormItem label="权限排序" prop="source_paixu">
      <Input v-model="formItem.source_paixu" placeholder="请输入权限图标..."></Input>
    </FormItem>

    <FormItem label="权限图标" prop="source_icon">
      <Input v-model="formItem.source_icon" placeholder="请输入权限图标..."></Input>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit">提交</Button>
      <Button type="primary" @click="handleReturn" style="margin-left: 8px">返回</Button>
      <Button type="primary" @click="handleReset" style="margin-left: 8px">清空</Button>
    </FormItem>
  </Form>
</template>
<script>
  export default {
    data() {
      return {
        formItem: {
          source_name: "",
          source_url: "",
          source_paixu: 0,
          source_icon: ""
        },
        ruleInline: {
          source_name: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 50, message: "长度不可以超过50!", trigger: 'blur'}
          ],
          source_url: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 100, message: "长度不可以超过100!", trigger: 'blur'}
          ],
          source_paixu: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 3, message: "长度不可以超过3!", trigger: 'blur'},
            {pattern: "^[1-9]\\d*$", message: "必须是数字!", trigger: 'blur'}
          ],
          source_icon: [
            {required: true, message: '此项为必添项!', trigger: 'blur'},
            {max: 100, message: "长度不可以超过100!", trigger: 'blur'}
          ]
        }
      }
    },
    components: {},
    beforeCreate: function () {
      this.$Spin.show();
    },
    created: function () {
      const id = this.params.id;
      if ("" != id) {//这个说明是修改，要发请求获得更有的数据
        this.$http.get(this.apiUrl() + 'resource/get/' + id, {}, {
          emulateJSON: true
        }).then((response) => {
          if (response && response.body.success) {
            this.formItem.source_name = response.body.resource.name;
            this.formItem.source_paixu = response.body.resource.tindex;
            this.formItem.source_url = response.body.resource.url;
            this.formItem.source_icon = response.body.resource.icon;
          } else {
            if (response.body.msg === 'session-timeout') {
              window.location.href = "/";
            } else {
              this.$Notice.error({title: "错误", desc: response.body.msg});
            }
          }
          this.$Spin.hide();
        });
      } else {
        this.$Spin.hide();
      }
    },
    methods: {
      handleSubmit: function () {
        console.info("id:" + this.params.id)
        console.info("pid:" + this.params.parentid)
        this.$refs['resource_form'].validate((valid) => {
          if (valid) {
            this.$http.post(this.apiUrl() + 'resource/save/', {
              name: this.formItem.source_name,
              tindex: this.formItem.source_paixu,
              url: this.formItem.source_url,
              icon: this.formItem.source_icon,
              id: this.params.id,
              parentid: this.params.parentid
            }, {
              emulateJSON: true
            }).then((response) => {
              if (response.body.success) {
                this.$Message.success(response.body.msg);
                //转到resource_list页面
                this.$emit('childClickMenu', '系统管理', '权限管理', 'resource_list');
              } else {
                this.$Notice.error({title: '错误', desc: response.body.msg});
              }
            });
          } else {
            this.$Notice.error({title: '错误', desc: "请输入完事信息后进行提交!"});
          }
        })
      },
      /**
       * 返回到权限列表页
       */
      handleReturn: function () {
        this.$emit('childClickMenu', '系统管理', '权限管理', 'resource_list');
      },
      handleReset: function () {
        this.$refs['resource_form'].resetFields();
      }
    },
    props: ['params']
  }
</script>
<style scoped>

</style>
